<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
<script src="${path}/resources/dist/js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
<script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
<head>
    <title>Title</title>
</head>
<body>
    <div id="app">
        <template>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 0">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品类型管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-button type="primary" @click="addMenu">添加一级书籍类型</el-button>
        <el-button type="primary" @click="addMenu">添加二级书籍类型</el-button>
<%--        <el-button size="small" type="primary" @click="">修改一级书籍类型</el-button>--%>
<%--        <el-button size="small" type="success">修改二级书籍类型</el-button>--%>

        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="修改一级书籍类型" name="first">
                <el-table size="small" v-infinite-scroll :data="bookfTypeList" highlight-current-row v-loading="loading" border
                          element-loading-text="拼命加载中"
                          style="width: 100%;">
                    <el-table-column prop="booktypeid" label="一级分类Id" width="150"></el-table-column>
                    <el-table-column prop="booktypename" label="一级分类名称" width="150"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button @click="initUpdate(scope.row)" type="primary" size="small">修改</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="修改二级书籍类型" name="second">
                <el-table size="small" :data="bookSonTypeList" highlight-current-row v-loading="loading" border
                          element-loading-text="拼命加载中"
                          style="width: 100%;">
                    <el-table-column prop="booktypeid" label="二级分类Id" width="150"></el-table-column>
                    <el-table-column prop="booktypename" label="二级分类名称" width="150"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button @click="initUpdate(scope.row)" type="primary" size="small">修改</el-button>
                            <el-button @click="initUpdate(scope.row)" type="danger" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </template>
    </div>
<script type="text/javascript">
    const vm = new Vue({
        el: "#app",
        data: {
            activeName: 'first',
            bookfTypeList:{},
            bookSonTypeList:{}
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab.name === "second");
                if (tab.name === "second"){
                    this.sonChange();
                }
            },
            sonChange() {
                axios.post("${path}/book.do?method=findAllBookSonType&booktypeid=-1").then(response => {
                    vm.bookSonTypeList = response.data;
                });
            },

            ftypeChange() {
                axios.post("${path}/book.do?method=findAllBookParentType").then(response => {
                    vm.bookfTypeList = response.data;
                });
            }
        },
        mounted() {
            this.ftypeChange();
        }
    })
</script>
</body>
</html>
